<template>
  <div
    style="padding-top: 40px; margin-bottom: 10px;background-color: RGB(246, 246, 246);display: flex;flex-direction: row;justify-content: space-around;"
    class="app-container">
    <div class="grid-left">
      <div class="info">
        <router-link to="/member" class="info-item" :span="6">
          <p>
            <span>会员总数</span>
            <span class="tip-right">{{indexInfo.memberNum || 0}}</span>
          </p>
          <p>
            <span> <i style="color: red" class="el-icon-s-platform"></i> </span>
            <span style="margin-top: 10px;" class="tip-right red">今日办理：{{indexInfo.memberNumCur || 0}}</span>
          </p>
        </router-link>

        <router-link to="/card" class="info-item" :span="6">
          <p>
            <span>年卡总数</span>
            <span class="tip-right">{{indexInfo.cardNum || 0}}</span>
          </p>
          <p>
            <span> <i style="color:#13ce66;" class="el-icon-s-management"></i> </span>
            <span style="margin-top: 10px;" class="tip-right red">今日办理：{{indexInfo.cardNumCur || 0}}</span>
          </p>
        </router-link>
        <router-link to="/recharge" class="info-item" :span="6">
          <p>
            <span>充值总次数</span>
            <span class="tip-right">{{indexInfo.rechargeRecordNum || 0}}</span>
          </p>
          <p>
            <span> <i style="color: lightskyblue" class="el-icon-s-flag"></i> </span>
            <span style="margin-top: 10px;" class="tip-right red">今日办理：{{indexInfo.rechargeRecordNumCur || 0}}</span>
          </p>
        </router-link>
        <router-link to="/admission" class="info-item" :span="6">
          <p>
            <span>入园总人次</span>
            <span class="tip-right">{{indexInfo.admissionRecordNum || 0}}</span>
          </p>
          <p>
            <span> <i style="color: #FEC171 " class="el-icon-s-claim"></i> </span>
            <span style="margin-top: 10px;" class="tip-right red">今日入园：{{indexInfo.admissionRecordNumCur || 0}}</span>
          </p>
        </router-link>
      </div>
      <div class="grid-list">
        <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" label-width="68px"
          style="text-align: right;">
          <el-form-item>
            <el-input size="medium" clearable style="width: 240px" v-model="queryParams.search.keyword"
              placeholder="会员编号/手机号/年卡编号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" icon="el-icon-search" size="medium"
              @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" @row-click="changeCard" size="medium" :highlight-current-row="true"
          :header-cell-style="{fontSize:'18px'}" height="460" max-height="460">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="name" width="120" label="姓名" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="url" width="120" label="头像" align="center">
            <template slot-scope="scope">
              <xImage :src="scope.row.url" />
              <!-- <image-preview :src="scope.row.thumbnail" style="height:40px"/> -->
            </template>
          </el-table-column>
          <el-table-column prop="sex" width="120" label="性别" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
            </template>
          </el-table-column>
          <el-table-column prop="age" width="110" label="年龄" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="num" width="" label="编号" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="mobile" width="200" label="联系电话" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="endDate" width="200" label="截止日期" align="center">
            <template slot-scope="scope">
              {{parseTime(scope.row.endDate,'{y}-{m}-{d}')}}
            </template>
          </el-table-column>
          <el-table-column prop="status" width="120" label="状态" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_card_status" :value="scope.row.status" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="grid-right">
      <!-- <img v-lazy="avatarUrl" /> -->
      <div style="margin-top: 30px;">
        <xImage :src="dataForm.url" :imgWidth="'300px'" :imgHeight="'240px'" />
      </div>
      <div class="member-info">
        <div class="member-name">{{dataForm.name||"会员"}}</div>
        <div class="cell-item">
          <div class="cell-title">
            年龄
          </div>
          <div class="cell-right">
            {{dataForm.age}}
          </div>
        </div>
        <div class="cell-item">
          <div class="cell-title">
            性别
          </div>
          <div class="cell-right">
            {{dataForm.sex==1?'男':'女'}}
          </div>
        </div>
        <div class="cell-item">
          <div class="cell-title">
            编号
          </div>
          <div class="cell-right">
            {{dataForm.num}}
          </div>
        </div>
        <div class="cell-item">
          <div class="cell-title">
            到期时间
          </div>
          <div class="cell-right">
            {{parseTime(dataForm.endDate,'{y}-{m}-{d}')}}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="margin-top: 30px;" v-if="dataForm.id">
        <el-button @click="handleRecharge" :disabled="!dataForm.id" size="medium">续费</el-button>
        <el-button size="medium" :disabled="disable" :loading="loading" type="primary"
          @click="dataFormSubmit()">入园</el-button>
      </span>
    </div>
    <recharge v-if="rechargeVisible" ref="recharge" @refreshDataList="initPage"></recharge>
  </div>

</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import moment from 'moment';
  import * as echarts from 'echarts';
  require('echarts/theme/macarons'); // echarts theme
  import {
    getMembers
  } from '@/api/business/cardinfo'
  import {
    addOrUpdate as addAdmissionRecord
  } from "@/api/business/admissionrecord";
  import {
    getOverView
  } from '@/api/home'
  import router from '@/router';
  import Recharge from './business/CardInfo/recharge.vue';
  export default {
    name: "Index",
    computed: {
      ...mapGetters(["sysUser"]),
    },
    components: {
      Recharge
    },
    dicts: ['sys_user_sex', 'sys_card_status'],
    data() {
      return {
        imageApi: process.env.VUE_APP_IMAGE_BASE_URL,
        franchiseeId: '',
        avatarUrl: require('@/assets/images/profile.jpg'),
        // avatarFemale: require('@/assets/images/avatarFemale.svg'),
        loading: false,
        disable: true,
        rechargeVisible: false,
        indexInfo: {},
        dataForm: {
          id: 0,
          name: '',
          sex: '',
          age: '',
          url: '',
          beginDate: '',
          endDate: '',
          createTime: '',
          status: '',
          count: '',
          remark: '',
          num: '',
          memberId: ''
        },
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          search: {
            keyword: ''
          }
        },
        dataList: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        // this.initPage()
      })
    },
    computed: {},
    created() {
      this.$nextTick(() => {
        this.initPage()
      })
    },
    methods: {
      initPage() {
        getOverView().then(res => {
          this.indexInfo = res.data
        })
        this.loadList()
      },
      changeCard(item) {
        if (item.id) {
          this.disable = false
        }
        if (item) {
          this.dataForm = item
          this.avatarUrl = item.url
        }
      },
      loadList() {
        this.dataList = []
        if (this.queryParams.search.keyword) {
          getMembers(this.queryParams).then(res => {
            this.dataList = res.data
            if (this.dataList.length > 0) {
              let res=this.dataList.filter(item=>{
                return item.id==this.dataForm.id
              })[0]
              let isExists = this.dataList.some(obj => obj.id === this.dataForm.id);
              if (!res) {
                this.dataForm = {}
              }else{
                this.dataForm=res
              }
            } else {
              this.dataForm = {}
            }
          })
        } else {
          this.dataForm = {}
        }
      },
      /** 充值按钮操作 */
      handleRecharge() {
        this.rechargeVisible = true;
        this.$nextTick(() => {
          this.$refs.recharge.init(this.dataForm)
        })
      },
      dataFormCancle() {

      },
      dataFormSubmit() {
        if (!this.dataForm.id) {
          return;
        }
        this.loading = true
        const data1 = moment().format('YYYY-MM-DD');
        const data2 = moment(this.dataForm.endDate).format('YYYY-MM-DD')
        if (moment(data1).isAfter(moment(data2))) {
          this.loading = false
          return
        }
        addAdmissionRecord({
          cardId: this.dataForm.id
        }).then(res => {
          this.loading = false
          this.disable = true
          this.initPage()
        }).catch((err) => {
          this.disable = true
          this.loading = false
        })
      },
      handleQuery() {
        this.loadList()
      },
      resetQuery() {
        // this.resetForm("queryForm");
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          search: {
            keyword: ''
          }
        }
        this.loadList()
      }
    }
  };
</script>

<style scoped lang="scss">
  .grid-right {
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    width: 22%;
    background-color: #fff;

    &>img {
      margin-top: 26px;
      width: 290px;
    }

    .member-info {
      align-items: center;
      width: 90%;

      .member-name {
        margin-top: 16px;
        text-align: center;
        font-size: 32px;
      }

      .cell-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 18rpx 0rpx;
        border-bottom: 1mm ridge rgba(220, 220, 203, 0.6);

        .cell-title {
          font-size: 20px;
          color: #252A30;
          line-height: 50px;
          text-align: left;
          display: flex;
          flex: 1;
        }

        .cell-right {
          font-size: 20px;
          color: #252A30;
          line-height: 50px;
          text-align: right;
        }
      }
    }
  }

  .grid-left {
    display: flex;
    flex-direction: column;
    flex: 1;

    .grid-list {
      margin-right: 20px;
    }
  }

  .info {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;

    .info-item {
      width: 24%;
      background: #ffffff;
      border-radius: 5px;
      padding: 20px;
      cursor: pointer;
      font-size: 22px;

      p {
        .tip-right {
          float: right;
          font-size: 30px;
        }

        .red {
          color: #0b89ff;
        }

        i {
          font-size: 40px;
        }
      }
    }
  }
</style>
